<template lang="pug">
  el-card.nav-box
    div(ref="navMenu")
      div.navHeader(slot="header")
        div.avatar-box
          img.avatar(:src="identity.icon")
        div.info-box
          p.userInfoName {{identity.name}}
          p.userInfoHospital {{identity.hospital | ellipsis}}丨{{identity.identity}}
      div.line
      el-menu(:default-active="defaultActive"
      class="el-menu-vertical-demo"
      text-color="#8d9498"
      @open="handleOpen"
      @select="handleSelect"
      router
      @close="handleClose")
        el-submenu(:index="index+''" v-for="(item, index) in navData" v-if="item.children" :key="index")
          template(slot="title")
            span.icon.iconfont(v-html="item.icon")
            span.navTitle {{item.title}}
          el-menu-item(v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.path") • {{subItem.title}}
        el-menu-item.firstNav(:index="item.path" v-for="(item, index) in navData" :key="index" v-if="!item.children")
          span.icon.iconfont(v-html="item.icon")
          span.navTitle(slot="title") {{item.title}}
      el-button.exit-btn(icon="el-icon-switch-button" @click="clearItem") 注销账户

</template>

<script>
  import Message from '../components/corelib/common/message'

  export default {
    name: 'NavMenu',
    data() {
      return {
        icon: '&#xe60c',
        navData: [
          {
            title: '专家信息',
            icon: '&#xe60c',
            children: [
              {title: '组织病理专家信息', path: '/expertOrg'},
              {title: '细胞病理专家信息', path: '/expertCell'}
            ]
          },
          {
            title: '档案管理',
            icon: '&#xe648',
            children: [
              {title: '组织病理档案管理', path: '/recorg', routerName: ''},
              {title: '细胞病理档案管理', path: '/reccell', routerName: ''}
            ]
          },
          {title: '图像上传', path: '', routerName: '', icon: '&#xe647'},
          {title: '会诊诊断', path: '/diagnose', routerName: '', icon: '&#xe664'},
          {title: '打印报告', path: '/print', routerName: '', icon: '&#xe602'},
          {title: '在线论坛', path: '/forum/index', routerName: '', icon: '&#xe625'},
          {title: '会诊统计', path: '/statistics', routerName: '', icon: '&#xe631'}
        ],
        userInfo: {
          name: '刘翠',
          hospital: '吉林大学中日联合医院',
          position: '医生',
          avatar: require('@/assets/img/expert/avatar.png')
        },
        defaultActive: '',
        classifyArr: null,
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        name: '',
        hospital: '',
        identityName: '',
        identify: ''
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 7) {
          return value.slice(0, 7) + '...'
        }
        return value
      }
    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.$refs.navMenu.style.height = that.fullHeight - 100 + 'px'
          })
        })()
      }
      this.$nextTick(() => {
        that.$refs.navMenu.style.height = that.fullHeight - 110 + 'px'
      })
      // if (this.identityName.identity === '管理专家') {
      //   this.navData[2].path = '/live/audience'
      // } else if (this.identityName.identity === '医生' || this.identityName.identity === '专家') {
      //   this.navData[2].path = '/live/index'
      // }
      // if (this.identityName.identity !== '专家') {
      //   this.navData.forEach((item, index) => {
      //     if (item.title === '会诊诊断') {
      //       // console.log('this.navData下标++++++++++++++', this.navData.indexOf(item))
      //       this.navData.splice(this.navData.indexOf(item), 1)
      //     }
      //   })
      // }
      if (this.identity.identity !== '专家' && this.identity.identity !== '管理专家') {
        this.navData.forEach((res) => {
          if (res.title === '会诊诊断') {
            this.navData.splice(this.navData.indexOf(res), 1)
          }
        })
      }
      this.classify()
    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    created() {
      this.defaultActive = this.$route.path
      // 身份判断
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))[0]
      console.log('------identify------', this.identity)
      if (this.identity.identity === '管理专家') {
        this.navData[2].path = '/live/imageConsultation'
        this.navData[2].title = '会诊影像'
      } else if (this.identity.identity === '医生') {
        this.navData[2].path = '/live/index'
        if (this.defaultActive === '/live/anchor') {
          this.defaultActive = '/live/index'
        }
      } else if (this.identity.identity === '专家') {
        this.navData[2].path = '/live/index'
        this.navData[2].title = '会诊影像'
        if (this.defaultActive === '/live/audience') {
          this.defaultActive = '/live/index'
        }
      }
      if (this.defaultActive === '/forum/forumDetails' || this.defaultActive === '/forum/forumPost') {
        this.defaultActive = '/forum/index'
      }
      if (this.identity.identity === '管理专家' && this.identity.className === '组织病理') {
        this.navData[0].children.pop()
        console.log('细胞病理++++++++++++++++++++++')
      } else if (this.identity.identity === '管理专家' && this.identity.className === '细胞病理') {
        this.navData[0].children.shift()
        console.log('组织病理++++++++++++++++++++++')
      }
    },
    methods: {
      classify() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/classs/getArchives'
        }).then((res) => {
          this.classifyArr = res.data.data
          this.navData[1].children[0].title = this.classifyArr[0].className
          this.navData[1].children[1].title = this.classifyArr[1].className
        })
      },
      clearItem() {
        this.$KalixCatch.clear()
        Message.success('退出登录')
        window.location.href = 'https://xsdmkj.cn/suo'
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
        console.log(this.defaultActive)
      }
    }
  }
</script>

<style scoped lang="stylus">
  .icon
    margin-right 17px
    font-size 22px
    text-align center

  .avatar-box
    display inline-block
    vertical-align middle
    .avatar
      width 40px
      height 40px

  .info-box
    display inline-block
    vertical-align middle

  .avatar-box
    margin-right 8px

  .info-box
    font-size 16px

  .nav-box
    position relative

  .exit-box
    position absolute
    bottom 28px

  .exit-btn
    position absolute
    bottom 20px
    width 216px
    border-radius 6px
    height 46px
    background-color #f4f4f4
    border 1px solid #f4f4f4
    font-size 16px

  .line
    border-bottom 1px solid #dddddd

  .el-card.nav-box
    border-radius 0

  .userInfoName
    font-size 16px
    line-height 21px
    margin-bottom 5px
    color #555

  .userInfoHospital
    font-size 14px
    line-height 14px
    color #777

  .navHeader
    padding 0 5px 17px 5px
    border-bottom 1px solid #f3f3f3

  .el-menu-vertical-demo
    padding-top 20px

  .nav-box .el-menu .el-submenu
    border-radius 0
    margin-top 0

  .navTitle
    font-size 16px
    line-height 22px
    font-weight bold

  .firstNav
    line-height 46px
    height 46px

  .el-menu-item:focus
  .el-menu-item:hover
    outline 0
    background-color #f4f4f4
</style>
